(function($){
$.widget('avui.javmenu',{
    _create: function(){
    
    /* --------------- */
    /* Create elements
    /* --------------- */
    // Create menu bar
    this._$menubar = $('<div></div>')
        .addClass('jav-javmenu-menubar')
        .css({
            'height':this.options.menubarHeight+'px',
            'background-color':this.options.menubarColor
            })
        .appendTo(this.element);
        

    // Create menu headers
    this._$menuItems = [];
    var numItems = this.options.menuItems.length;
    var numSubmenuItems;
    var $submenu;
    var $submenuItem;
    var $subsubmenu;
    var numSubSubmenuItems;

    for (var i=0;i<numItems;i++){

    // Add container
    var $container = $('<ul></ul>')
        .addClass(
                'jav-javmenu-menu ' +
                'ui-widget'
            )
        .css({
            'line-height': this.options.menubarHeight + 'px',
            'background-color':this.options.menubarColor
            })
        .appendTo(this._$menubar);

    // Add menu item list
    this._$menuItems[i] = $('<li><a>'+ this.options.menuItems[i].title +'</a></li>')
        .addClass('jav-javmenu-menuItems')
        .attr('id','mnu'+this.options.menuItems[i].title)
        .height(this.options.menubarHeight)
        .appendTo($container);
    
    
    // Add submenu
    numSubmenuItems = this.options.menuItems[i].submenu.length;

    if (numSubmenuItems>0){
    $submenu = $('<ul><ul>')
        .addClass('jav-javmenu-submenu')
        .css({
            'top':this.options.menubarHeight+'px',
            'line-height': this.options.menubarHeight + 'px',
            'background-color':this.options.menubarColor
            })
        .appendTo(this._$menuItems[i]);

    for(var j=0;j<numSubmenuItems;j++){
        $submenuItem =
        $('<li><a>'+ this.options.menuItems[i].submenu[j].title +'</a></li>')
            .addClass('jav-javmenu-subMenuItems')
            .attr('id','mnu'+this.options.menuItems[i].submenu[j].title)
            .height(this.options.menubarHeight)
            .appendTo($submenu);
            
        numSubSubmenuItems = this.options
                                 .menuItems[i].submenu[j]
                                 .submenu.length;
        if (numSubSubmenuItems>0){
            $subsubmenu = $('<ul></ul>')
                .addClass('jav-javmenu-subsubmenu')
                .css({
                    'margin-top': -this.options.menubarHeight + 'px',
                    'line-height': this.options.menubarHeight + 'px',
                    'background-color':this.options.menubarColor
                    })
                .appendTo($submenuItem);
                
            for(var k=0;k<numSubSubmenuItems;k++){
            $('<li><a>'+
              this.options.menuItems[i].submenu[j].submenu[k] +
              '</a></li>')
            .addClass('jav-javmenu-subsubMenuItems')
            .attr('id','mnu'+this.options.menuItems[i].submenu[j].submenu[k])
            .height(this.options.menubarHeight)
            .appendTo($subsubmenu);
            } // End For k
        }
    } // End For j

    } // End If(numSubmenuItems>0)

    } // End For i

    /* --------------- */
    /* Events
    /* --------------- */
    // Hover menuItems
    var mnuBkgColor = this.options.menubarColor;
    $('.jav-javmenu-menuItems').hover(
        function(){
            var $this = $(this);
            $(this).children('a')
            .css({
                'background-color':'#7DB51E',
                'color':'#fff',
                'cursor':'default'
                })
            .click(
                function(){
                    $this.children('.jav-javmenu-submenu').fadeIn();
                }
            );
        },
        function(){
            $(this).children('a')
            .css({
                'background-color':mnuBkgColor,
                'color':'#123456'
                });
            $(this).children('.jav-javmenu-submenu').fadeOut();
        }
    ); // End hover event

    // Hover subMenuItems
    $('.jav-javmenu-subMenuItems').hover(
        function(){
            $(this).children('a')
            .css({
                'background-color':'#7DB51E',
                'color':'#fff',
                'cursor':'default'
                });
            $(this).children('ul').fadeIn();
        },
        function(){
            $(this).children('a')
            .css({
                'background-color':mnuBkgColor,
                'color':'#123456'
                });
            $(this).children('ul').fadeOut();
        }
    ); // End hover event
    
    // Hover subsubMenuItems
    $('.jav-javmenu-subsubMenuItems').hover(
        function(){
            $(this).children('a')
            .css({
                'background-color':'#7DB51E',
                'color':'#fff',
                'cursor':'default'
                });
            
        },
        function(){
            $(this).children('a')
            .css({
                'background-color':mnuBkgColor,
                'color':'#123456'
                });
            
        }
    ); // End hover event
    
    },

    options: {
        menuItems:
        [
            {
                "title":"File",
                "submenu":
                [
                    {
                        "title":"New",
                        "submenu":["New File...","New from Template..."]
                    },
                    {
                        "title":"Open",
                        "submenu": []
                    },
                    {   "title": "Quit",
                        "submenu": []
                    }
                ]
            },
            {
                "title":"Edit",
                "submenu":
                [
                    {
                        "title":"Cut",
                        "submenu":[]
                    },
                    {
                        "title":"Copy",
                        "submenu": []
                    },
                    {   "title": "Paste",
                        "submenu": []
                    },
                    {   "title": "Find...",
                        "submenu": ["From Current File","All files"]
                    },
                    {   "title": "Replace",
                        "submenu": []
                    }
                ]
            },
            {
                "title":"Tools",
                "submenu":[]
            },
        ],

        menubarHeight: 25,

        menubarColor: '#39A2B5'

    },

    _open: function(){
        if (!this.options.disabled){


            this._menubar.show();
            this._trigger('open');
        }
    },

    _close: function(){
        this._menubar.hide();
        this._trigger('close');
    },

    destroy: function(){
        this._menubar.remove();
        this._$menuItems.remove();
        this.element
            .remove('jav-javmenu-menubar')
        $.Widget.prototype.destroy.apply(this, arguments);
    }
});
})(jQuery);
